<template>
  <div class="bootstrap-jumbotron" ref="jumbotron">
    <electron-canvas>
      <electron-logo/>
    </electron-canvas>
    <ul class="bootstrap-feed">
      <li v-for="feed in feeds" :key="feed.title + feed.msg">
        {{'['+ feed.title + '] ' + feed.msg}}
        <i style="float:right">{{feed.status}}</i>
      </li>
    </ul>
  </div>
</template>
<script>
import ElectronCanvas from './Bootstrap/ElectronCanvas'
import ElectronLogo from './Bootstrap/ElectronLogo'

import { Bootstrap } from '../bootstrap/bootstrap'
import TestModule from '../bootstrap/modules/test-module'

export default {
  name: 'bootstrap',
  components: { ElectronLogo, ElectronCanvas },
  data () {
    return {
      feeds: []
    }
  },
  mounted () {
    setTimeout(this.loading, 3000)
  },
  methods: {
    /**
     * 开始加载模块，启动项目.
     */
    async loading () {
      this.$refs[ 'jumbotron' ].classList.add('loading')
      await new Bootstrap(this.processFeedback.bind(this))
        .then(new TestModule('title1'))
        .then(new TestModule('title2'))
        .then(new TestModule('title3'), new TestModule('title4'), new TestModule('title5'))
        .bootstrap()
    },
    processFeedback (feed) {
      this.feeds.push(feed)
      if (this.feeds.length > 10) {
        this.feeds.shift()
      }
    }
  }
}
</script>
<style>
.bootstrap-jumbotron {
  padding: 24px 12px 72px 12px;
  color: #74b1be;
  background-color: #2b2e3b;
  position: relative;
  height: 100%;
  width: 100%;
}

.bootstrap-jumbotron {
  padding-top: 20%;
  transition: padding-top 0.5s;
}

.bootstrap-jumbotron.loading {
  padding-top: 10%;
}

.bootstrap-feed {
  width: 400px;
  margin: 0 auto;
  margin-top: 20px;
}
</style>
